<template>
	<view class="container">
		<!-- Tab栏 -->
		<view class="tab-bar">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ 'active': currentTab === index }"
				@click="switchTab(index)">
				{{ tab.name }}
				<view v-if="currentTab === index" class="tab-underline"></view>
			</view>
		</view>

		<!-- 根据Tab选择显示的内容 -->
		<view class="tab-content">
			<view class="title" v-if="currentTab === 0">
				上传微信收款码
			</view>
			<view class="title" v-else>
				上传支付宝收款码
			</view>
			<!-- 收款码 -->
			<view class="skm">
				<!-- 图片上传 -->
				<UploadImage mode="single" v-model="form.accountQrcode" :count="1"></UploadImage>
			</view>
			<view class="title">
				请填写真实姓名
			</view>
			<input type="text" placeholder="请填写真实姓名" v-model="form.realName" class="write" />
			<view class="title">
				请填写真实手机号
			</view>
			<input type="text" placeholder="请填写真实手机号" v-model="form.phone" class="write" />
			<view class="title">
				请填写真实金额
			</view>
			<input type="text" placeholder="请填写真实金额" v-model="form.value" class="write" />
			<view class="sure" @click="withdrawal">
				确认提现
			</view>
		</view>
	</view>
	</view>
</template>

<script>
import {
	withdrawApplyFor
} from "../../api/myRedpack.js";
import {
	$getStorage,
	$setStorage
} from "@/utils/auth.js";
export default {
	data() {
		return {
			currentTab: 0, // 默认选中第一个Tab
			tabs: [{
				name: "微信",
				type: "wechat"
			}, {
				name: '支付宝',
				type: "alipay"
			}],
			form: {
				accountQrcode: "",
				realName: '',
				phone: '',
				value: '',
				withdrawType: "",
			}

		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	methods: {
		// 切换Tab
		switchTab(index) {
			this.currentTab = index;
		},
		withdrawal() {
			let data = this.form;
			data.userId = this.userInfo.id;
			data.withdrawType = this.tabs[this.currentTab].type
			// 姓名校验
			if (!this.form.realName) {
				uni.showToast({
					title: '姓名不能为空',
					icon: "none",
					duration: 2000
				});
				return;
			}
			// 手机号正则校验
			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!this.form.phone) {
				uni.showToast({
					title: '手机号不能为空',
					icon: "none",
					duration: 2000
				});
				return;
			} else if (!phoneRegex.test(this.form.phone)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: "none",
					duration: 2000
				});
				return;
			}
			// 金额校验
			if (!this.form.value) {
				uni.showToast({
					title: '金额不能为空',
					icon: "none",
					duration: 2000
				});
				return;
			} else if (isNaN(this.form.value) || this.form.value.includes('-') || this.form.value.includes('.')) {
				uni.showToast({
					title: '金额不能包含特殊符号',
					icon: "none",
					duration: 2000
				});
				return;
			} else if (parseFloat(this.form.value) === 0) {
				uni.showToast({
					title: '金额不能为0',
					icon: "none",
					duration: 2000
				});
				return;
			}
			withdrawApplyFor(data).then((res) => {
				if (res.code == '200') {
					uni.showToast({
						title: res.message,
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}
			})
		}
	},
};
</script>

<style scoped>
.container {
	height: 90vh;
}

.tab-bar {
	width: 100%;
	display: flex;
	align-items: center;
	color: #000;
}

.tab-item {
	position: relative;
	padding: 20rpx 80rpx;
	cursor: pointer;
}

.tab-item.active {
	font-weight: bold;
	font-size: 35rpx;
}

.tab-underline {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120rpx;
	height: 4rpx;
	background-color: #6a0dad;
}

.title {
	width: 100%;
	height: 100rpx;
	padding-left: 40rpx;
	line-height: 100rpx;
	font-size: 40rpx;
	color: #000;
	font-weight: 900;
	letter-spacing: 3rpx;
}

.skm {
	width: 160rpx;
	height: 180rpx;
	margin-left: 40rpx;
	/* background-color: aquamarine; */
}

.write {
	width: 90%;
	height: 100rpx;
	border-bottom: 1px solid black;
	margin-left: 40rpx;
	padding: 20rpx;
	box-sizing: border-box;
}

.sure {
	width: 70%;
	height: 100rpx;
	line-height: 100rpx;
	color: white;
	text-align: center;
	font-size: 40rpx;
	letter-spacing: 10rpx;
	background-color: rgb(108, 67, 255);
	margin-top: 300rpx;
	margin-left: 15%;
	border-radius: 20rpx;
}
</style>